<template>
  <div class="main-bg"></div>
  <div class="input-wrapper">
    <h3>添加测试用例{{ $attrs.roy }}</h3>
    <button class="close-button" @click="emit('closeAdder')">关闭</button>
    <form id="caseForm" ref="caseFormRef">
      <label
        >用例名：<input
          type="text"
          name="caseName"
          placeholder="输入用例名"
          v-model="newCase.caseName"
      /></label>
      <label
        >步骤名：<input
          type="text"
          name="stepName"
          placeholder="输入步骤名"
          v-model="newCase.stepName"
      /></label>
      <div>
        用例类型：
        <label
          ><input type="radio" name="caseType" value="web" /> web自动化</label
        >
        <label
          ><input type="radio" name="caseType" value="api" /> 接口自动化</label
        >
      </div>
      <label for="keywords">关键字：</label>
      <select name="keywords" id="keywords" v-model="newCase.keywords">
        <option value="openBrowser">打开浏览器</option>
        <option value="visitWeb">访问网页</option>
        <option value="click">点击元素</option>
        <option value="input">输入内容</option>
      </select>
      <br />
      <label
        >参数1：<input type="text" name="param1" v-model="newCase.param1"
      /></label>
      <label
        >参数2：<input type="text" name="param2" v-model="newCase.param2"
      /></label>
      <button id="addSubmit" type="button" @click="handleAddCase">
        提交新增
      </button>
      <button type="button" @click="changeAttr">修改一下透传属性</button>
    </form>
  </div>
</template>

<script lang="ts" setup>
import {
  reactive,
  useAttrs,
  onMounted,
  onUpdated,
  onUnmounted,
  ref,
} from "vue";
//也可以通过props把函数传过来直接调用，并且实际调用的时候，作用域在Main组件中。
// const props = defineProps(["addCase"]);
const emit = defineEmits(["closeAdder", "addCase"]);
// const props=defineProps(["roy"])
onMounted(() => {
  console.log("------------adder页面开始挂载了--------");
});

const attrs = useAttrs();
console.log("setup中输出透传属性", attrs);
let will = "帅哥";

onUpdated(() => {
  console.log("++++++++++++adder页面更新了+++++++++++");
});
onUnmounted(() => {
  console.log("****************adder页面解绑了**************");
});

interface caseShow{
  caseName: string;
  stepName: string;
  keywords: string;
  param1: string;
  param2: string;
}

interface SunnyCase extends caseShow {
  id: number;
}

//不会对newCase整体赋值，而是修改里面的属性
let newCase = reactive<caseShow>({
  caseName: "用例名",
  stepName: "步骤名",
  keywords: "关键字",
  param1: "参数一",
  param2: "参数二",
});
function handleAddCase() {
  emit("addCase", newCase);
}

function changeAttr() {
  will = "老肉一";
  console.log("修改之后的attrs是", attrs);
}
</script>

<style scoped></style>
